<template>
  <div>
    <!-- 1 -->
    <div class="biu" v-for="item in data" :key="key"> 
        <div class="img"> 
                <img :src="item.img" alt="">
            </div> 
          <div> 
            <p class="p1">{{ item.floor }}</p>
            <p class="p2">设备数量:{{ item.handclapNum }}</p>
            <p class="p3">
              <span class="s1">正常设备:<i>{{ item.normalNum }}</i></span>
              <span class="s2">故障设备:<i>{{ item.equipmentNum }}</i></span>
            </p>
          </div>  
    </div>



















  </div>
</template>

<script setup lang="ts">
import {reactive,ref,onMounted} from 'vue'
import {getmonitor} from '../../request/index'


let data=ref([])
onMounted(()=>{
  getmonitor().then(res=>{
    console.log('监控情况数据',res.data.data.result[0]);
      const relsuts=res.data.data.result[0]
      const alldatas=relsuts.slice(0,3)
      console.log('窃取',alldatas);
        data.value=alldatas
          console.log('2222',data);
  })

  
})

</script>
<style scoped lang="scss">
.biu{
  width: 90%;
 margin-top: 5px;
 margin-left: 5%;
  display: flex;
  border: 1px solid #2b5ac9;
  justify-content: space-between;
  align-items: center;
}
.img img{
  width: 190px;
  height: 80px;
}
.p1{
  color:#92a4ec;
  font-size: 16px;
}
.p2{
  color: #fff;
  font-size: 14px;
}
.p3{
  color:#92a4ec;
  width: 100%;
  font-size: 14px;
  .s1 i{
    color:#53b621;
  }
  .s2{
    margin-left: 15px;
  }
  .s2 i{
    color: red;
  }
}

</style>
